<template>
  <div class="elderly-management">
    <div class="header">
      <h2>老人信息管理</h2>
      <el-button type="primary" @click="showAddDialog = true">
        <el-icon><Plus /></el-icon>
        添加老人
      </el-button>
    </div>

    <!-- 搜索区域 -->
    <div class="search-area">
      <el-form :model="searchForm" inline>
        <el-form-item label="姓名">
          <el-input v-model="searchForm.name" placeholder="请输入姓名" clearable style="width: 200px" />
        </el-form-item>
        <el-form-item label="身份证号">
          <el-input v-model="searchForm.idCard" placeholder="请输入身份证号" clearable style="width: 200px" />
        </el-form-item>
        <el-form-item label="状态">
          <el-select v-model="searchForm.status" placeholder="请选择状态" clearable style="width: 150px">
            <el-option label="在院" value="ACTIVE" />
            <el-option label="非活跃" value="INACTIVE" />
            <el-option label="请假" value="ON_LEAVE" />
            <el-option label="已出院" value="DISCHARGED" />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleSearch">
            <el-icon><Search /></el-icon>
            搜索
          </el-button>
          <el-button @click="resetSearch">重置</el-button>
        </el-form-item>
      </el-form>
    </div>

    <!-- 数据表格 -->
    <el-table :data="elderlyList" v-loading="loading" border>
      <el-table-column type="index" label="序号" width="60" />
      <el-table-column prop="name" label="姓名" width="100" />
      <el-table-column prop="gender" label="性别" width="80" />
      <el-table-column prop="age" label="年龄" width="80" />
      <el-table-column prop="idCard" label="身份证号" width="180" />
      <el-table-column prop="phone" label="联系电话" width="130" />
      <el-table-column prop="emergencyContact" label="紧急联系人" width="120" />
      <el-table-column prop="emergencyPhone" label="紧急联系电话" width="130" />
      <el-table-column prop="admissionDate" label="入院日期" width="120" />
      <el-table-column prop="status" label="状态" width="100">
        <template #default="scope">
          <el-tag :type="getStatusType(scope.row.status)">{{ getStatusText(scope.row.status) }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="200" fixed="right">
        <template #default="scope">
          <el-button type="primary" size="small" @click="handleView(scope.row)">查看</el-button>
          <el-button type="warning" size="small" @click="handleEdit(scope.row)">编辑</el-button>
          <el-button type="danger" size="small" @click="handleDelete(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页 -->
    <div class="pagination">
      <el-pagination
        v-model:current-page="pagination.currentPage"
        v-model:page-size="pagination.pageSize"
        :page-sizes="[10, 20, 50, 100]"
        :total="pagination.total"
        layout="total, sizes, prev, pager, next, jumper"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>

    <!-- 添加/编辑对话框 -->
    <el-dialog
      v-model="showAddDialog"
      :title="isEdit ? '编辑老人信息' : '添加老人信息'"
      width="600px"
      @close="resetForm"
    >
      <el-form :model="elderlyForm" :rules="rules" ref="elderlyFormRef" label-width="120px">
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="姓名" prop="name">
              <el-input v-model="elderlyForm.name" placeholder="请输入姓名" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="性别" prop="gender">
              <el-select v-model="elderlyForm.gender" placeholder="请选择性别">
                <el-option label="男" value="男" />
                <el-option label="女" value="女" />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="年龄" prop="age">
              <el-input-number v-model="elderlyForm.age" :min="0" :max="150" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="身份证号" prop="idCard">
              <el-input v-model="elderlyForm.idCard" placeholder="请输入身份证号" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="联系电话" prop="phone">
              <el-input v-model="elderlyForm.phone" placeholder="请输入联系电话" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="入院日期" prop="admissionDate">
              <el-date-picker
                v-model="elderlyForm.admissionDate"
                type="date"
                placeholder="请选择入院日期"
                format="YYYY-MM-DD"
                value-format="YYYY-MM-DD"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="紧急联系人" prop="emergencyContact">
              <el-input v-model="elderlyForm.emergencyContact" placeholder="请输入紧急联系人" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="紧急联系电话" prop="emergencyPhone">
              <el-input v-model="elderlyForm.emergencyPhone" placeholder="请输入紧急联系电话" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item label="家庭地址" prop="address">
          <el-input v-model="elderlyForm.address" placeholder="请输入家庭地址" />
        </el-form-item>
        
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="紧急联系人关系">
              <el-select v-model="elderlyForm.emergencyRelation" placeholder="请选择关系">
                <el-option label="子女" value="子女" />
                <el-option label="配偶" value="配偶" />
                <el-option label="兄弟姐妹" value="兄弟姐妹" />
                <el-option label="亲戚" value="亲戚" />
                <el-option label="朋友" value="朋友" />
                <el-option label="其他" value="其他" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="护理级别">
              <el-select v-model="elderlyForm.careLevel" placeholder="请选择护理级别">
                <el-option label="低级护理" value="LOW" />
                <el-option label="中级护理" value="MEDIUM" />
                <el-option label="高级护理" value="HIGH" />
                <el-option label="重症护理" value="INTENSIVE" />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="房间号">
              <el-input v-model="elderlyForm.roomNumber" placeholder="请输入房间号" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="床位号">
              <el-input v-model="elderlyForm.bedNumber" placeholder="请输入床位号" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="状态">
              <el-select v-model="elderlyForm.status" placeholder="请选择状态">
                <el-option label="在院" value="ACTIVE" />
                <el-option label="非活跃" value="INACTIVE" />
                <el-option label="请假" value="ON_LEAVE" />
                <el-option label="已出院" value="DISCHARGED" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <!-- 占位 -->
          </el-col>
        </el-row>
        <el-form-item label="健康状况" prop="healthStatus">
          <el-select v-model="elderlyForm.healthStatus" placeholder="请选择健康状况">
            <el-option label="良好" value="GOOD" />
            <el-option label="一般" value="FAIR" />
            <el-option label="较差" value="POOR" />
            <el-option label="危险" value="DANGEROUS" />
            <el-option label="病重" value="CRITICAL" />
          </el-select>
        </el-form-item>
        <el-form-item label="疾病史">
          <el-input
            v-model="elderlyForm.medicalHistory"
            type="textarea"
            :rows="3"
            placeholder="请输入疾病史"
          />
        </el-form-item>
        <el-form-item label="备注">
          <el-input
            v-model="elderlyForm.remarks"
            type="textarea"
            :rows="3"
            placeholder="请输入备注信息"
          />
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="showAddDialog = false">取消</el-button>
          <el-button type="primary" @click="handleSubmit" :loading="submitLoading">
            {{ isEdit ? '更新' : '添加' }}
          </el-button>
        </span>
      </template>
    </el-dialog>

    <!-- 查看详情对话框 -->
    <el-dialog v-model="showViewDialog" title="老人详细信息" width="600px">
      <div class="elderly-detail" v-if="currentElderly">
        <el-descriptions :column="2" border>
          <el-descriptions-item label="姓名">{{ currentElderly.name }}</el-descriptions-item>
          <el-descriptions-item label="性别">{{ currentElderly.gender }}</el-descriptions-item>
          <el-descriptions-item label="年龄">{{ currentElderly.age }}岁</el-descriptions-item>
          <el-descriptions-item label="身份证号">{{ currentElderly.idCard }}</el-descriptions-item>
          <el-descriptions-item label="联系电话">{{ currentElderly.phone }}</el-descriptions-item>
          <el-descriptions-item label="入院日期">{{ currentElderly.admissionDate }}</el-descriptions-item>
          <el-descriptions-item label="紧急联系人">{{ currentElderly.emergencyContact }}</el-descriptions-item>
          <el-descriptions-item label="紧急联系电话">{{ currentElderly.emergencyPhone }}</el-descriptions-item>
          <el-descriptions-item label="家庭地址" :span="2">{{ currentElderly.address }}</el-descriptions-item>
          <el-descriptions-item label="健康状况">
            <el-tag :type="getHealthStatusType(currentElderly.healthStatus)">
              {{ getHealthStatusText(currentElderly.healthStatus) }}
            </el-tag>
          </el-descriptions-item>
          <el-descriptions-item label="当前状态">
            <el-tag :type="getStatusType(currentElderly.status)">
              {{ getStatusText(currentElderly.status) }}
            </el-tag>
          </el-descriptions-item>
          <el-descriptions-item label="疾病史" :span="2">
            {{ currentElderly.medicalHistory || '无' }}
          </el-descriptions-item>
          <el-descriptions-item label="备注" :span="2">
            {{ currentElderly.remarks || '无' }}
          </el-descriptions-item>
        </el-descriptions>
      </div>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { Plus, Search } from '@element-plus/icons-vue'
import type { FormInstance, FormRules } from 'element-plus'

// 定义老人信息接口
interface Elderly {
  id: string
  userId?: number | null
  name: string
  gender: string
  age: number
  idCard: string
  phone: string
  emergencyContact: string
  emergencyPhone: string
  address: string
  healthStatus: string
  medicalHistory: string
  remarks: string
  admissionDate: string
  status: string
  emergencyRelation?: string
  careLevel?: string
  roomNumber?: string
  bedNumber?: string
  birthDate?: string | null
  allergies?: string
  medications?: string
}

// 响应式数据
const loading = ref(false)
const submitLoading = ref(false)
const showAddDialog = ref(false)
const showViewDialog = ref(false)
const isEdit = ref(false)
const elderlyFormRef = ref<FormInstance>()

// 搜索表单
const searchForm = reactive({
  name: '',
  idCard: '',
  status: ''
})

// 老人表单
const elderlyForm = reactive({
  id: '',
  userId: null as number | null,
  name: '',
  gender: '',
  age: 0,
  idCard: '',
  phone: '',
  emergencyContact: '',
  emergencyPhone: '',
  address: '',
  healthStatus: '',
  medicalHistory: '',
  remarks: '',
  admissionDate: '',
  status: 'ACTIVE',
  emergencyRelation: '',
  careLevel: '',
  roomNumber: '',
  bedNumber: '',
  birthDate: null as string | null,
  allergies: '',
  medications: ''
})

// 表单验证规则
const rules: FormRules = {
  name: [{ required: true, message: '请输入姓名', trigger: 'blur' }],
  gender: [{ required: true, message: '请选择性别', trigger: 'change' }],
  age: [{ required: true, message: '请输入年龄', trigger: 'blur' }],
  idCard: [
    { required: true, message: '请输入身份证号', trigger: 'blur' },
    { pattern: /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/, message: '身份证号格式不正确', trigger: 'blur' }
  ],
  phone: [
    { required: true, message: '请输入联系电话', trigger: 'blur' },
    { pattern: /^1[3-9]\d{9}$/, message: '手机号格式不正确', trigger: 'blur' }
  ],
  emergencyContact: [{ required: true, message: '请输入紧急联系人', trigger: 'blur' }],
  emergencyPhone: [
    { required: true, message: '请输入紧急联系电话', trigger: 'blur' },
    { pattern: /^1[3-9]\d{9}$/, message: '手机号格式不正确', trigger: 'blur' }
  ],
  admissionDate: [{ required: true, message: '请选择入院日期', trigger: 'change' }],
  healthStatus: [{ required: true, message: '请选择健康状况', trigger: 'change' }]
}

// 分页数据
const pagination = reactive({
  currentPage: 1,
  pageSize: 10,
  total: 0
})

// 老人列表数据
const elderlyList = ref<Elderly[]>([])

const currentElderly = ref<Elderly | null>(null)

// 获取状态类型
const getStatusType = (status: string) => {
  const typeMap: Record<string, string> = {
    'ACTIVE': 'success',
    'INACTIVE': 'info',
    'ON_LEAVE': 'warning',
    'DISCHARGED': 'info',
    // 添加可能的其他状态值
    'Active': 'success',
    'Inactive': 'info',
    'On_Leave': 'warning',
    'Discharged': 'info',
    '在院': 'success',
    '非活跃': 'info',
    '请假': 'warning',
    '已出院': 'info'
  }
  return typeMap[status] || 'info'
}

// 获取健康状况类型
const getHealthStatusType = (status: string) => {
  const typeMap: Record<string, string> = {
    'GOOD': 'success',
    'FAIR': 'warning',
    'POOR': 'danger',
    'DANGEROUS': 'danger',
    'CRITICAL': 'danger'
  }
  return typeMap[status] || 'info'
}

// 加载老人列表
const loadElderlyList = async () => {
  loading.value = true
  try {
    const response = await fetch(`http://localhost:8080/api/elderly?current=${pagination.currentPage}&size=${pagination.pageSize}`, {
      method: 'GET',
      headers: {
        'Content-Type': 'application/json',
        'Authorization': `Bearer ${localStorage.getItem('token')}`
      }
    })
    
    if (!response.ok) {
      throw new Error('获取老人列表失败')
    }
    
    const result = await response.json()
    if (result.code === 200) {
      console.log('从后端获取的原始数据:', result.data.content)
      elderlyList.value = result.data.content.map((item: any) => ({
        id: item.id,
        userId: item.userId,
        name: item.name,
        gender: item.gender,
        age: item.age,
        idCard: item.idCard,
        phone: item.phone,
        emergencyContact: item.emergencyContact,
        emergencyPhone: item.emergencyPhone,
        address: item.address,
        healthStatus: item.healthStatus,
        medicalHistory: item.medicalHistory || '',
        remarks: item.remarks || '',
        admissionDate: item.admissionDate,
        status: item.status,
        emergencyRelation: item.emergencyRelation || '',
        careLevel: item.careLevel || '',
        roomNumber: item.roomNumber || '',
        bedNumber: item.bedNumber || '',
        birthDate: item.birthDate || null,
        allergies: item.allergies || '',
        medications: item.medications || ''
      }))
      pagination.total = result.data.totalElements
    } else {
      ElMessage.error(result.message || '获取老人列表失败')
    }
  } catch (error) {
    console.error('加载老人列表失败:', error)
    ElMessage.error('加载老人列表失败')
  } finally {
    loading.value = false
  }
}

// 状态映射函数
const getStatusText = (status: string) => {
  const statusMap: Record<string, string> = {
    'ACTIVE': '在院',
    'INACTIVE': '非活跃',
    'ON_LEAVE': '请假',
    'DISCHARGED': '已出院',
    // 添加可能的其他状态值
    'Active': '在院',
    'Inactive': '非活跃',
    'On_Leave': '请假',
    'Discharged': '已出院',
    '在院': '在院',
    '非活跃': '非活跃',
    '请假': '请假',
    '已出院': '已出院'
  }
  return statusMap[status] || status
}

// 健康状态映射函数
const getHealthStatusText = (healthStatus: string) => {
  const healthStatusMap: Record<string, string> = {
    'GOOD': '良好',
    'FAIR': '一般',
    'POOR': '较差',
    'DANGEROUS': '危险',
    'CRITICAL': '病重'
  }
  return healthStatusMap[healthStatus] || healthStatus
}

// 搜索
const handleSearch = async () => {
  loading.value = true
  try {
    // 构建查询参数
    const params = new URLSearchParams()
    params.append('current', pagination.currentPage.toString())
    params.append('size', pagination.pageSize.toString())
    
    // 添加搜索条件
    if (searchForm.name) {
      params.append('name', searchForm.name)
    }
    if (searchForm.idCard) {
      params.append('idCard', searchForm.idCard)
    }
    if (searchForm.status) {
      params.append('status', getStatusValue(searchForm.status))
    }
    
    const response = await fetch(`http://localhost:8080/api/elderly/search?${params.toString()}`, {
      method: 'GET',
      headers: {
        'Content-Type': 'application/json',
        'Authorization': `Bearer ${localStorage.getItem('token')}`
      }
    })
    
    if (!response.ok) {
      throw new Error('搜索失败')
    }
    
    const result = await response.json()
    if (result.code === 200) {
      elderlyList.value = result.data.content.map((item: any) => ({
        id: item.id,
        userId: item.userId,
        name: item.name,
        gender: item.gender,
        age: item.age,
        idCard: item.idCard,
        phone: item.phone,
        emergencyContact: item.emergencyContact,
        emergencyPhone: item.emergencyPhone,
        address: item.address,
        healthStatus: item.healthStatus,
        medicalHistory: item.medicalHistory || '',
        remarks: item.remarks || '',
        admissionDate: item.admissionDate,
        status: item.status,
        emergencyRelation: item.emergencyRelation || '',
        careLevel: item.careLevel || '',
        roomNumber: item.roomNumber || '',
        bedNumber: item.bedNumber || '',
        birthDate: item.birthDate || null,
        allergies: item.allergies || '',
        medications: item.medications || ''
      }))
      pagination.total = result.data.totalElements
    } else {
      ElMessage.error(result.message || '搜索失败')
    }
  } catch (error) {
    console.error('搜索失败:', error)
    ElMessage.error('搜索失败')
  } finally {
    loading.value = false
  }
}

// 重置搜索
const resetSearch = () => {
  Object.assign(searchForm, {
    name: '',
    idCard: '',
    status: ''
  })
  loadElderlyList()
}

// 查看详情
const handleView = (row: Elderly) => {
  currentElderly.value = row
  showViewDialog.value = true
}

// 编辑
const handleEdit = (row: Elderly) => {
  isEdit.value = true
  Object.assign(elderlyForm, row)
  showAddDialog.value = true
}

// 删除
const handleDelete = async (row: Elderly) => {
  ElMessageBox.confirm(
    `确定要删除老人 "${row.name}" 的信息吗？`,
    '确认删除',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    }
  ).then(async () => {
    try {
      const response = await fetch(`http://localhost:8080/api/elderly/${row.id}`, {
        method: 'DELETE',
        headers: {
          'Authorization': `Bearer ${localStorage.getItem('token')}`
        }
      })
      
      if (!response.ok) {
        throw new Error('删除失败')
      }
      
      const result = await response.json()
      if (result.code === 200) {
        ElMessage.success('删除成功')
        loadElderlyList()
      } else {
        ElMessage.error(result.message || '删除失败')
      }
    } catch (error) {
      console.error('删除失败:', error)
      ElMessage.error('删除失败')
    }
  }).catch(() => {
    ElMessage.info('已取消删除')
  })
}

// 提交表单
const handleSubmit = async () => {
  elderlyFormRef.value?.validate(async (valid) => {
    if (valid) {
      submitLoading.value = true
      try {
        // 映射前端字段到后端字段
        const elderlyData = {
          userId: elderlyForm.userId,
          name: elderlyForm.name,
          gender: elderlyForm.gender,
          age: elderlyForm.age,
          idCard: elderlyForm.idCard,
          phone: elderlyForm.phone,
          emergencyContact: elderlyForm.emergencyContact,
          emergencyPhone: elderlyForm.emergencyPhone,
          address: elderlyForm.address,
          healthStatus: getHealthStatusValue(elderlyForm.healthStatus),
          medicalHistory: elderlyForm.medicalHistory,
          remarks: elderlyForm.remarks,
          admissionDate: elderlyForm.admissionDate,
          status: getStatusValue(elderlyForm.status),
          emergencyRelation: elderlyForm.emergencyRelation,
          careLevel: elderlyForm.careLevel,
          roomNumber: elderlyForm.roomNumber,
          bedNumber: elderlyForm.bedNumber,
          birthDate: elderlyForm.birthDate,
          allergies: elderlyForm.allergies,
          medications: elderlyForm.medications
        }
        
        let response
        if (isEdit.value) {
          // 更新
          response = await fetch(`http://localhost:8080/api/elderly/${elderlyForm.id}`, {
            method: 'PUT',
            headers: {
              'Content-Type': 'application/json',
              'Authorization': `Bearer ${localStorage.getItem('token')}`
            },
            body: JSON.stringify(elderlyData)
          })
        } else {
          // 添加
          response = await fetch('http://localhost:8080/api/elderly', {
            method: 'POST',
            headers: {
              'Content-Type': 'application/json',
              'Authorization': `Bearer ${localStorage.getItem('token')}`
            },
            body: JSON.stringify(elderlyData)
          })
        }
        
        if (!response.ok) {
          throw new Error(isEdit.value ? '更新失败' : '添加失败')
        }
        
        const result = await response.json()
        if (result.code === 200) {
          ElMessage.success(isEdit.value ? '更新成功' : '添加成功')
          showAddDialog.value = false
          resetForm()
          loadElderlyList()
        } else {
          ElMessage.error(result.message || (isEdit.value ? '更新失败' : '添加失败'))
        }
      } catch (error) {
        console.error('提交失败:', error)
        ElMessage.error(isEdit.value ? '更新失败' : '添加失败')
      } finally {
        submitLoading.value = false
      }
    }
  })
}

// 状态值映射函数（前端到后端）
const getStatusValue = (status: string) => {
  const statusMap: Record<string, string> = {
    'ACTIVE': 'ACTIVE',
    'INACTIVE': 'INACTIVE',
    'ON_LEAVE': 'ON_LEAVE',
    'DISCHARGED': 'DISCHARGED'
  }
  return statusMap[status] || status
}

// 健康状态值映射函数（前端到后端）
const getHealthStatusValue = (healthStatus: string) => {
  // 如果已经是枚举值，直接返回
  if (['GOOD', 'FAIR', 'POOR', 'DANGEROUS', 'CRITICAL'].includes(healthStatus)) {
    return healthStatus
  }
  // 否则进行映射
  const healthStatusMap: Record<string, string> = {
    '良好': 'GOOD',
    '一般': 'FAIR',
    '较差': 'POOR',
    '危险': 'DANGEROUS',
    '病重': 'CRITICAL'
  }
  return healthStatusMap[healthStatus] || 'GOOD'
}

// 重置表单
const resetForm = () => {
  isEdit.value = false
  Object.assign(elderlyForm, {
    id: '',
    userId: null,
    name: '',
    gender: '',
    age: 0,
    idCard: '',
    phone: '',
    emergencyContact: '',
    emergencyPhone: '',
    address: '',
    healthStatus: '',
    medicalHistory: '',
    remarks: '',
    admissionDate: '',
    status: 'ACTIVE',
    emergencyRelation: '',
    careLevel: '',
    roomNumber: '',
    bedNumber: '',
    birthDate: null,
    allergies: '',
    medications: ''
  })
  elderlyFormRef.value?.resetFields()
}

// 分页处理
const handleSizeChange = (val: number) => {
  pagination.pageSize = val
  loadElderlyList()
}

const handleCurrentChange = (val: number) => {
  pagination.currentPage = val
  loadElderlyList()
}

// 组件挂载时加载数据
onMounted(() => {
  loadElderlyList()
})
</script>

<style scoped>
.elderly-management {
  padding: 20px;
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.header h2 {
  margin: 0;
  color: #303133;
}

.search-area {
  background: #f5f7fa;
  padding: 20px;
  border-radius: 8px;
  margin-bottom: 20px;
}

.pagination {
  margin-top: 20px;
  display: flex;
  justify-content: flex-end;
}

.elderly-detail {
  margin-top: 20px;
}

.dialog-footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}
</style> 